<!DOCTYPE html>
<html lang="zh-hans">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Bilive_Client</title>
  <!-- bootstrap css -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./view/style.css">
  <!-- bootstrap javascript -->
  <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
  <!-- 与服务器通信 -->
  <script defer type="text/javascript" src="./view/options.js"></script>
  <!-- 自定义 -->
  <script defer type="text/javascript" src="./view/script.js"></script>
</head>

<body>
  <div style="perspective: 200vmax;">
    <div id="ddd">
      <!-- 登录界面 -->
      <div id="login" class="container-fluid position-absolute d-none">
        <div class="row align-items-center justify-content-center" style="height: 80vh;">
          <div class="col-md-6">
            <div class="card border-primary">
              <div class="card-header">
                <h1>
                  <span>Bilive Client</span>
                  <iframe src="https://ghbtns.com/github-btn.html?user=lzghzr&amp;repo=bilive_client&amp;type=star&amp;count=true&amp;size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
                </h1>
              </div>
              <div class="card-body">
                <div id="path" class="input-group mt-2">
                  <div class="input-group-prepend">
                    <span class="input-group-text">地址</span>
                  </div>
                  <input type="text" class="form-control">
                </div>
                <div id="protocol" class="input-group mt-1">
                  <div class="input-group-append">
                    <span class="input-group-text">protocol</span>
                  </div>
                  <input type="text" class="form-control">
                  <div class="input-group-append">
                    <label class="input-group-text pl-4">
                      <input type="checkbox" class="form-check-input">
                      <span>保持连接</span>
                    </label>
                  </div>
                </div>
              </div>
              <div id="connect" class="card-footer">
                <button type="button" class="btn btn-primary">连接</button>
                <span></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设置界面 -->
      <div id="option" class="container-fluid position-absolute d-none">
        <div class="row justify-content-center">
          <div class="col-md-8 m-3">
            <div class="card border-primary">
              <div class="card-header">
                <h4>Bilive Client</h4>
              </div>
              <div id="config" class="card-body">
              </div>
              <div class="card-footer">
                <button type="button" id="saveConfig" class="btn btn-primary">保存设置</button>
                <button type="button" id="addUser" class="btn btn-primary">添加用户</button>
                <button type="button" id="showLog" class="btn btn-primary">显示日志</button>
              </div>
            </div>
          </div>
        </div>
        <div id="user" class="row"></div>
      </div>
      <!-- 日志 -->
      <div id="log" class="container-fluid position-absolute d-none">
      </div>
    </div>
  </div>
  <!-- 返回按钮 -->
  <button id="logreturn" type="button" class="btn btn-primary position-absolute d-none">返回</button>
  <!-- 弹出模态框 -->
  <div class="modal fade" tabindex="-1" role="dialog" style="display: none;" aria-hidden="true">
    <div class="modal-dialog"></div>
  </div>
  <!-- 模板 -->
  <div id="template" class="d-none">
    <template id="configTextTemplate">
      <div class="input-group mb-1">
        <div class="input-group-prepend">
          <span class="input-group-text _description" data-toggle="tooltip" data-placement="top"></span>
        </div>
        <input type="text" class="form-control">
      </div>
    </template>
    <template id="configCheckboxTemplate">
      <div class="form-check mb-1">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input">
          <span class="_description" data-toggle="tooltip" data-placement="top"></span>
        </label>
      </div>
    </template>
    <template id="userTemplate">
      <div class="col-md-3 mb-3 userData">
        <div class="card border-primary">
          <div id="config" class="card-body userConfig">
          </div>
          <div class="card-footer">
            <button type="button" class="btn btn-primary saveUser">保存</button>
            <button type="button" class="btn btn-danger deleteUser">删除</button>
          </div>
        </div>
      </div>
    </template>
    <template id="modalContentTemplate">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">提示</h5>
          <button type="button" class="close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary">关闭</button>
          <button type="button" class="btn btn-primary d-none">确定</button>
        </div>
      </div>
    </template>
    <template id="captchaTemplate">
      <div class="card">
        <img class="card-img-top" alt="验证码">
        <div class="card-body">
          <input type="text" class="form-control" placeholder="请输入验证码">
        </div>
      </div>
    </template>
  </div>
</body>

</html>